import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import DrillScope from './DrillScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import InteractionSetting from './InteractionSetting.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import tips from '../common/indicator-tips.jsx'
var traceCols = [{
  title:'方法名',
  key:'name',
  render:function(fmtVal,rowData){
    return (
      <a className="link-in-list-widget-float" href={`#/traces/${ rowData.id }/${ rowData.timestamp }`}>{fmtVal}</a>
    )
  }
},{
  title:'耗时(ms)',
  key:'executeTime',
  sortable:true,
  formatter:format.integer
},{
  title:'发生时间',
  key:'timestamp',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'操作系统及版本',
  key:'osName',
  render:function(fmtVal,rowData){
    return (
      <span>{fmtVal+' '+rowData.osVersionName}</span>
    )
  }
}]

export default class DrillView extends View {
  constructor(props){
    super(props);
    this.showInteractionSetting = this.showInteractionSetting.bind(this)
  }
  showInteractionSetting(){
    InteractionSetting.mount({
      alias:this.state.title,
      id:this.scope.nameId
    })
  }
  render() {
    let chartSettings = {
      legend: {
        itemStyle: {
          fontSize: '12px',
          width: 'auto',
          textOverflow: 'initial',
          overflow: 'auto',
          whiteSpace: 'initial'
        }
      }
    };

    return (
      <div className="box">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            <div className="float-right">
              <a className="iconfont btn-gray btn-xs btn-pos" href="javascript:;" onClick={this.showInteractionSetting}>
                &#xe637; 设置别名
              </a>
            </div>
            <h4>{this.state.title}</h4>
          </div>
          <div className="widget-content">
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title={
                      <span>
                        UI Thread Breakdown
                        <i className="iconfont" data-tip={tips.interaction_ui_bd}>&#xe663;</i>
                      </span>
                    } extra={
                      addWidgetMixin(this.scope.chart0Api,'UI Thread Breakdown')
                    }>
                    <ChartWidget chartSettings={chartSettings} store={this.state.chart0}/>
                  </Card>
                </div>
              </div>
            </div>
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                <Card title={
                    <span>
                      Worker Thread Breakdown
                      <i className="iconfont" data-tip={tips.interaction_work_bd}>&#xe663;</i>
                    </span>
                  } extra={
                    addWidgetMixin(this.scope.chart1Api,'Worker Thread Breakdown')
                  }>
                  <ChartWidget store={this.state.chart1}/>
                </Card>
                </div>
              </div>
            </div>
            {
              this.state.info?(
                <div className="pure-g">
                  <div className="pure-u-1">
                    <div className="box">
                      <Card>
                        <table className="text-detail">
                          <tbody>
                            <tr>
                              <th>采集次数：</th>
                              <td>
                                {this.state.info.count}
                              </td>
                              <th>影响设备：</th>
                              <td>
                                {this.state.info.affected}
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </Card>
                    </div>
                  </div>
                </div>
              ):null
            }
            <div className="pure-g">
              <div className="pure-u-1 pure-u-lg-1-2">
                <div className="box">
                  <Card title="APP版本占比">
                    <ChartWidget store={this.state.pie0} chartType='pie' height={260}/>
                  </Card>
                </div>
              </div>
              <div className="pure-u-1 pure-u-lg-1-2">
                <div className="box">
                  <Card title="操作系统占比">
                    <ChartWidget store={this.state.pie1} chartType='pie' height={260}/>
                  </Card>
                </div>
              </div>
            </div>
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title={
                      <span>
                        慢交互追踪列表
                        <i className="iconfont" data-tip={tips.interaction_trace}>&#xe663;</i>
                      </span>
                    }>
                    <GridWidget cols={traceCols} store={this.state.grid} />
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

DrillView.defaultProps = {
  Scope:DrillScope
}
